<template>
  <div class="search">
    <Card>
      <div class="news-content">
        <div class="news-title">{{ detailView.title }}</div>
        <div class="news-second">
          <div>{{ detailView.origin }}</div>
          <div>{{ detailView.createTime }}</div>
        </div>
        <div
          class="news-body"
          v-if="detailView.resourceType == 1"
          v-html="detailView.details"
        ></div>
        <div class="news-body" v-else>
          <video autoplay controls :src="detailView.content" />
        </div>
        <div>
          <div v-for="(i, k) in labelList" :key="k" class="type-item">
            {{ i }}
          </div>
        </div>
          <div>
            <Button type="text" @click="toback">返回</Button>
          </div>
      </div>
    </Card>
  </div>
</template>

<script>
import * as API_News from "@/api/news.js";

export default {
  name: "news-detail",
  data() {
    return {
      detailView: {
        resourceType: 1
      }, // 预览类容
      labelList: [], //关键字标签
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "news-detail");
      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
      this.$router.go(-1);
    },
    // 初始化表单
    init(id = null) {
      let form = {
        id: null,
        title: null, //资讯标题
        recommendSort: -1, //推荐显示 -1不推荐，1推荐
        type: null, //资讯类型
        sourceType: null, //资讯来源类型
        origin: null, //资讯来源
        keyword: null, //关键字
        displayMode: 1, //显示模式 1大图，2小图，3普通
        resourceType: 1, //上传形式 1图文，2视频
        details: null, //资讯内容
        content: null, // 临时资讯内容
        coverPath: null, // 资讯封面
        createByType: null, //创建人类型1004001专家，1004002平台
      };
      if (id) {
        API_News.getNewsDetail(id).then((res) => {
          if (res.success) {
            this.detailView = Object.assign(form, res.result);
            if (this.detailView.resourceType == 2) {
              this.detailView.content = this.detailView.details;
            }
            if (this.detailView.keyword) {
              this.labelList = this.detailView.keyword.split(",");
            }
          }
        });
      } else {
        this.detailView = Object.assign({}, form);
        this.labelList = [];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.news-content {
  width: auto;
  max-height: 700px;
  min-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 100px;
  .news-title {
    color: #000;
    margin: 20px 0;
    text-align: center;
    font-size: 28px;
  }
  .news-second {
    display: flex;
    justify-content: center;
    > div {
      margin: 0 40px;
    }
  }
  .news-body {
    font-size: 16px;
    width: auto;
    padding: 20px 50px;
    min-height: 560px;
    text-align: center;
    video {
      height: 500px;
      background-color: #000;
    }
  }
  .type-item {
    user-select: none;
    display: inline-block;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin: 0 5px;
    background-color: #eeeeee;
  }
}
</style>
